<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MS365 登录测试</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #0078d4;
            text-align: center;
            margin-bottom: 30px;
        }
        .test-section {
            margin: 20px 0;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
        .test-section h3 {
            color: #333;
            margin-top: 0;
        }
        button {
            background-color: #0078d4;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin: 5px;
        }
        button:hover {
            background-color: #106ebe;
        }
        .status {
            margin-top: 10px;
            padding: 10px;
            border-radius: 5px;
            font-family: monospace;
        }
        .success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .info {
            background-color: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
        .url-display {
            background-color: #f8f9fa;
            padding: 10px;
            border-radius: 5px;
            font-family: monospace;
            word-break: break-all;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔐 MS365 登录测试</h1>
        
        <div class="test-section">
            <h3>1. 路由测试</h3>
            <button onclick="testRoutes()">测试路由</button>
            <div id="routeStatus"></div>
        </div>

        <div class="test-section">
            <h3>2. 回调URL测试</h3>
            <button onclick="testCallbackUrl()">测试回调URL</button>
            <div id="callbackStatus"></div>
        </div>

        <div class="test-section">
            <h3>3. 登录流程测试</h3>
            <button onclick="testLoginFlow()">开始登录测试</button>
            <div id="loginStatus"></div>
        </div>

        <div class="test-section">
            <h3>4. 当前URL信息</h3>
            <div class="url-display" id="currentUrl"></div>
            <button onclick="updateUrlInfo()">刷新URL信息</button>
        </div>
    </div>

    <script>
        function showStatus(elementId, message, type = 'info') {
            const element = document.getElementById(elementId);
            element.innerHTML = `<div class="status ${type}">${message}</div>`;
        }

        function updateUrlInfo() {
            const currentUrl = window.location.href;
            const urlParams = new URLSearchParams(window.location.search);
            const hashParams = window.location.hash;
            
            let info = `当前URL: ${currentUrl}\n`;
            info += `查询参数: ${urlParams.toString() || '无'}\n`;
            info += `Hash参数: ${hashParams || '无'}\n`;
            
            if (urlParams.has('code')) {
                info += `✅ 检测到授权码: ${urlParams.get('code').substring(0, 20)}...\n`;
            }
            if (urlParams.has('state')) {
                info += `✅ 检测到state参数: ${urlParams.get('state')}\n`;
            }
            if (urlParams.has('error')) {
                info += `❌ 检测到错误: ${urlParams.get('error')}\n`;
                if (urlParams.has('error_description')) {
                    info += `错误描述: ${urlParams.get('error_description')}\n`;
                }
            }
            
            document.getElementById('currentUrl').textContent = info;
        }

        async function testRoutes() {
            try {
                showStatus('routeStatus', '🔄 正在测试路由...', 'info');
                
                // 测试主页
                const homeResponse = await fetch('/');
                if (homeResponse.ok) {
                    showStatus('routeStatus', '✅ 主页路由正常 (200)', 'success');
                } else {
                    showStatus('routeStatus', `❌ 主页路由异常 (${homeResponse.status})`, 'error');
                }
                
                // 测试回调路由
                const callbackResponse = await fetch('/auth/ms-365-auth/callback');
                if (callbackResponse.ok) {
                    showStatus('routeStatus', '✅ 回调路由正常 (200)', 'success');
                } else {
                    showStatus('routeStatus', `❌ 回调路由异常 (${callbackResponse.status})`, 'error');
                }
                
                // 测试不存在的路由
                const notFoundResponse = await fetch('/non-existent-route');
                if (notFoundResponse.ok) {
                    showStatus('routeStatus', '✅ SPA路由正常工作，不存在的路由返回主页 (200)', 'success');
                } else {
                    showStatus('routeStatus', `❌ SPA路由异常 (${notFoundResponse.status})`, 'error');
                }
                
            } catch (error) {
                showStatus('routeStatus', `❌ 路由测试失败: ${error.message}`, 'error');
            }
        }

        async function testCallbackUrl() {
            try {
                showStatus('callbackStatus', '🔄 正在测试回调URL...', 'info');
                
                const response = await fetch('/auth/ms-365-auth/callback');
                const text = await response.text();
                
                if (response.ok && text.includes('<!DOCTYPE html>')) {
                    showStatus('callbackStatus', '✅ 回调URL返回正确的HTML页面', 'success');
                } else {
                    showStatus('callbackStatus', `❌ 回调URL异常: ${response.status}`, 'error');
                }
                
            } catch (error) {
                showStatus('callbackStatus', `❌ 回调URL测试失败: ${error.message}`, 'error');
            }
        }

        function testLoginFlow() {
            showStatus('loginStatus', '🔄 准备开始登录流程...', 'info');
            
            // 构建登录URL
            const clientId = 'your-client-id'; // 需要替换为实际的客户端ID
            const tenantId = 'your-tenant-id'; // 需要替换为实际的租户ID
            const redirectUri = encodeURIComponent('http://localhost:8080/auth/ms-365-auth/callback');
            const scopes = encodeURIComponent('openid profile email User.Read');
            const state = Math.random().toString(36).substring(2, 15);
            const nonce = Math.random().toString(36).substring(2, 15);
            
            const authUrl = `https://login.microsoftonline.com/${tenantId}/oauth2/v2.0/authorize?` +
                `client_id=${clientId}&` +
                `scope=${scopes}&` +
                `redirect_uri=${redirectUri}&` +
                `response_type=code&` +
                `response_mode=form_post&` +
                `state=${state}&` +
                `nonce=${nonce}&` +
                `prompt=login&` +
                `client_info=1`;
            
            showStatus('loginStatus', `
                🔧 登录URL已构建完成<br>
                📝 请将以下配置信息替换为实际值：<br>
                - 客户端ID: ${clientId}<br>
                - 租户ID: ${tenantId}<br>
                <br>
                🔗 完整URL: <br>
                <div class="url-display">${authUrl}</div>
                <br>
                ⚠️ 注意：这是测试URL，需要配置正确的客户端ID和租户ID才能正常工作
            `, 'info');
        }

        // 页面加载时更新URL信息
        window.onload = function() {
            updateUrlInfo();
        };

        // 监听URL变化
        window.addEventListener('popstate', updateUrlInfo);
        window.addEventListener('hashchange', updateUrlInfo);
    </script>
</body>
</html> 